import { FC } from 'react'
import CountUp from 'react-countup'

export type DisplayBoxProps = {
  width?: string | number
  iconPath: string
  count: number
  label: string
  prevCount: number
  endCount: number
  onCountUpEnd?: () => void
  onDisplayBoxClick: () => void
}

const DisplayBox: FC<DisplayBoxProps> = (props) => {
  const {
    width = 137,
    iconPath,
    count = 0,
    label,
    prevCount,
    endCount,
    onCountUpEnd,
    onDisplayBoxClick
  } = props
  return (
    <div
      style={{
        width,
        height: 151,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
      }}
      onClick={onDisplayBoxClick}
    >
      <div>
        <img style={{ width: 34, height: 25 }} src={iconPath} alt="" />
      </div>
      <div
        className="dr_count"
        style={{
          fontSize: 28,
          lineHeight: '34px',
          fontFamily: 'ZQKHY',
          marginTop: 4
        }}
      >
        <CountUp
          start={prevCount}
          end={endCount}
          duration={1}
          onEnd={onCountUpEnd}
        />
      </div>
      <div className="dr_label" style={{ fontSize: 14 }}>
        {label}
      </div>
    </div>
  )
}

export default DisplayBox
